import * as React from 'react';
import { Form, Input, Select, Button, DatePicker } from 'antd'

interface PropsType {
  fetchFn: Function
}

const Filter: React.FC<PropsType> = ({ fetchFn }) => {
  const [form] = Form.useForm()
  const reset = () => {
    form.resetFields();
    fetchFn && fetchFn({})
  }
  const query = () => {
    const data = form.getFieldsValue()
    fetchFn && fetchFn(data)
  }
  return (
    <div style={{ marginBottom: 10 }}>
      <Form layout="inline" form={form}>
        <Form.Item style={{ marginBottom: 10 }} name="id">
          <Input placeholder='请输入ID' allowClear></Input>
        </Form.Item>
        <Form.Item style={{ marginBottom: 10 }} name="title">
          <Input placeholder='请输入标题' allowClear></Input>
        </Form.Item>
        <Form.Item style={{ marginBottom: 10 }} name="desc">
          <Input placeholder='请输入描述' allowClear></Input>
        </Form.Item>
        <Form.Item style={{ marginBottom: 10 }} name="type">
          <Select allowClear style={{ width: 200 }} placeholder="请选择类型"
            options={[{
              value: 'a', label: 'a', key: 'a'
            }, {
              value: 'b', label: 'b', key: 'b'
            }, {
              value: 'c', label: 'c', key: 'c'
            }, {
              value: 'b', label: 'd', key: 'd'
            }]}></Select>
        </Form.Item>
        <Form.Item style={{ marginBottom: 10 }} name="startPrice">
          <Input placeholder='请输入起始价' allowClear></Input>
        </Form.Item>
        <Form.Item style={{ marginBottom: 10 }} name="endPrice">
          <Input placeholder='请输入结束价' allowClear></Input>
        </Form.Item>
        <Form.Item style={{ marginBottom: 10 }} name="startTime">
            <DatePicker placeholder='请选择开始时间' style={{ width: 196 }}></DatePicker>
        </Form.Item>
        <Form.Item style={{ marginBottom: 10 }} name="endTime">
            <DatePicker placeholder='请选择结束时间' style={{ width: 196 }}></DatePicker>
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={() => query()}>查询</Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" danger onClick={() => reset()}>重置</Button>
        </Form.Item>
      </Form>
    </div>
  )

}

export default Filter